<template>
  <div>
    <div v-for="(item, index) in data" :key="index">
      <h3>{{ item.name }}</h3>
      <div v-if="item.children && item.children.length > 0" style="margin-left: 20px">
        <!-- 下面就是递归树组件，自己调用自己，这里的名称就是组件的name属性 -->
        <Tree :data="item.children" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tree',
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {}
  }
}
</script>
